<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的跳转</title>
</head>
<body>

<div id="app">
    <!--路由跳转标签  本质就是超链接-->
    <router-link to="/login">登录页</router-link>
    <router-link to="/register">注册页</router-link>
    <router-link to="/user">用户信息主页面</router-link>
    <hr>
    <router-link :to="{path:'/login'}">登录页</router-link>
    <router-link :to="{path:'/register'}">注册页</router-link>
    <router-link :to="{path:'/user'}">用户信息主页面</router-link>
    <hr>

    <router-link :to="{name:'Login'}">登录页</router-link>
    <router-link :to="{name:'Register'}">注册页</router-link>
    <router-link :to="{name:'User'}">用户信息主页面</router-link>

    <hr>

    <!--    使用js代码实现路由跳转-->
    <button @click="toLogin">登录页</button>
    <button @click="toRegister">注册页</button>

    <!--    路由出口标签-->
    <router-view></router-view>
</div>
<script src="../vue.js"></script>
<!--导入路由依赖-->
<script src="../vue-router3.js"></script>
<script>

    // 1.定义组件
    const Login = {
        template: `
            <div>
                <h1>欢迎登录</h1>
                <form action="">
                   <p><input type="text" placeholder="请输入用户名"></p>
                   <p><input type="text" placeholder="请输入密码"></p>
                   <p><input type="submit" value="立即登录"></p>
                </form>
            </div>
        `
    }

    const Register = {
        template: `
            <div>
                <h1>欢迎注册</h1>
                <form action="">
                   <p><input type="text" placeholder="请输入用户名"></p>
                   <p><input type="text" placeholder="请输入密码"></p>
                   <p><input type="submit" value="立即注册"></p>
                </form>
             </div>
        `
    }

    const User = {
        template: `
            <h1>用户信息主页面</h1>
        `
    }

    // 2. 定义一些路由  每个路由都需要映射到一个组件。
    const routes = [
        {path: '/login', component: Login,name:'Login'},  // 路由  name  组件的别名
        {path: '/register', component: Register,name: 'Register'},
        {path: '/user', component: User,name: 'User'},
    ]

    //  创建路由对象  实现  路径和组件的映射关系
    const router = new VueRouter({
        routes
    })
    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            toLogin(){
                console.log(this.$router)
                // 实现路由跳转    this.$router  路由对象
                this.$router.push("/login")
            },
            toRegister(){
                this.$router.push("/register")
            }
        },
        components: {   // 2.组件的注册
            // Login,Register,User
        },
        router   //  注册路由
    })
</script>

</body>
</html>